<template>
  <div>
    <i-tree :data='data'
            @on-toggle-expand='handleToggleExpand'
            @on-check-change='handleCheckChange'
            :showCheckbox='show'></i-tree>
    <i-button @on-click='hadleToggle'>toggle</i-button>
  </div>
</template>
<script>
import { iTree, iButton } from '../../components'
export default {
  name: 'i-tree-view',
  components: {
    iTree, iButton
  },
  data () {
    return {
      data: [
        {
          title: 'parent 1',
          expand: true,
          children: [
            {
              title: 'parent 1-1',
              expand: true,
              children: [
                {
                  title: 'leaf 1-1-1'
                },
                {
                  title: 'leaf 1-1-2'
                }
              ]
            },
            {
              title: 'parent 1-2',
              children: [
                {
                  title: 'leaf 1-2-1'
                },
                {
                  title: 'leaf 1-2-1'
                }
              ]
            }
          ]
        }
      ],
      show: true
    }
  },
  methods: {
    hadleToggle () {
      this.show = !this.show
    },
    handleToggleExpand (data) {
      // eslint-disable-next-line no-console
      console.log(data)
    },
    handleCheckChange (data) {
      // eslint-disable-next-line no-console
      console.log(data)
    }
  }
}
</script>